<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/bound.js"></script>
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				position: absolute;
				border:1px solid rgb(27,148,221);
				/* width: 200px;
				height: 200px; */
				background: rgba(8,106,205,0.3);
			}
			ul{
				width: 400px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<!-- <div class="box"></div> -->
		
		<ul>
			<li>1111</li>
			<li>222</li>
			<li>333</li>
			<li>4444</li>
			<li>5555</li>
			<li>666</li>
			<li>7777</li>
			<li>uuuuu</li>
			<li>88888</li>
			<li>1111</li>
			<li>222</li>
			<li>333</li>
			<li>4444</li>
			<li>5555</li>
			<li>666</li>
			<li>7777</li>
			<li>uuuuu</li>
			<li>88888</li>
		</ul>
		<script type="text/javascript">
			
			 var box = null;
			$(document).on('mousedown',function(ev){
				var x = ev.pageX;                       // 记录按下时的鼠标x位置
				var y = ev.pageY;								
				box = $('<div class="box">');			//创建一个标签				 
				box.css({								// 给她一个定位的位置
					left:x,top:y})				 
				$('body').append(box);					// 插入到页面中	
				$(document).on('mousemove',function(ev){
					var disX = ev.pageX - x;           // 鼠标移动时和按下时位置的差值
					var disY = ev.pageY - y;					
					if(disX <=0 ){
						box.css({
							width:Math.abs(disX),height:disY,left:ev.pageX
						})
					}else{
						box.css({
							width:Math.abs(disX),height:disY
						})
					}					
					if(disY <= 0){
						box.css({
							width:Math.abs(disX),height:Math.abs(disY),top:ev.pageY
						})
					}else{
						box.css({
							width:Math.abs(disX),height:Math.abs(disY)							
						})
					}
					
					
					// 调用碰撞的函数
					$('li').each(function(i,el){ //循环每一个li
						// console.log(el)
						var onoff = bound(el,box[0]);
						if(onoff){
							$(el).css({
								background:'#999'
							})
						}else{
							$(el).css({
								background:'#fff'
							})
						}
					})
					// 
					
				})
			})
			
			$(document).on('mouseup',function(){
				box.remove();
				// 解绑移动事件
				$(document).off('mousemove');
				
			})
		</script>
	</body>
</html>
